<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-jQuery的基本使用</title>
     <!-- 引入 jQuery 文件  -->
     <script src="./jquery.min.js"></script>

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
   <div></div>
  <script>
      /* 
      什么是 js 库：就是一个 js 文件，封装了很多的函数比如动画、显示、隐藏、元素获取等。
      jQuery 就是一个主要操作 DOM 的js库。
      都是对 js 的再次封装，类似超市的(火锅)食材半成品。

      j 是 Javascript，Query 是查询的意思。即对 DOM 进行了封装，可以快速查询。
      jQuery 封装了 Javascript 的常见功能代码，优化了 DOM 操作，事件处理等.

      优点：
          1. 轻量级，只有几十KB
          2. 兼容主流浏览器
          3. 链式编程，隐式迭代
          4. 免费开源
          5. 事件、样式、动画的支持，优化 DOM 操作。

      登录官网：https://jquery.com/
      
      使用步骤：
          1. 引入 jQuery 文件
          2. 通过 url 引入
    */
    //  jQuery 隐藏 div
    //   $('div').hide();

    /* 
        原生 js load 方法，重新加载页面
      window.addEventListener('load',function(){
          let div = document.querySelector('div');
          div.style.display = 'none';
      }); 
    */

    // jQuery 的 load 方法
   /* 
        $(function(){
            $('div').hide();
        }); 
    */

    // 等效写法
    
    $(document).ready(function(){
        $('div').hide();
        }); 

  </script>

  <script>
      // 原生 js隐藏 div
      let div = document.querySelector('div');
      div.style.display = 'none';

      // jQuery 隐藏 div
      $('div').hide();
  </script>
</body>

</html>